{% extends 'generic/Popup.twig' %}
{% block popup_id %}upload-images-form{% endblock %}
{% block title %}Upload Student Photos{% endblock %}
{% block body %}
    <div class="flex-col flex-col-space">
        <p>
            Instructions to download images of students:
            <a class="fa-question-circle" target=_blank href="http://submitty.org/instructor/student_photos"></a>
        </p>
        <p>
            Upload images by zipping up multiple course sections together,<br />
            zipping up each course section, or uploading the individual image(s).
        </p>
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
        <div id="upload-boxes">
            {# upload1 and input-file1 required for drag-and-drop.js #}
            <div id="upload1" class="file-input">
                <label class="label" for="input-file1">"Drag your file(s) here or click to open file browser"</label>
                <input type="file" name="files" id="input-file1" onchange="addFilesFromInput(1,false)" multiple />
                <table class="file-upload-table" id="file-upload-table-1"></table>
            </div>
        </div>
        <p>
            Total files cannot exceed {{ max_size_string }}.
        </p>
    </div>
    <script type="text/javascript">
        function makeSubmission() {
            handleDownloadImages('{{ csrf_token }}');
        }
        $(function() {
            $("#submit").click(function(e){ // Submit button
                makeSubmission();
                e.stopPropagation();
            });
        });
    </script>
    <script type="text/javascript">
        createArray(1);
        var dropzone = document.getElementById("upload1");
        dropzone.addEventListener("click", clicked_on_box, false);
        dropzone.addEventListener("dragenter", draghandle, false);
        dropzone.addEventListener("dragover", draghandle, false);
        dropzone.addEventListener("dragleave", draghandle, false);
        dropzone.addEventListener("drop", dropWithMultipleZips, false);
    </script>
{% endblock %}
{% block buttons %}
    {{ block('close_button') }}
    <input class="btn btn-primary" id="submit" type="submit" value="Submit" />
{% endblock %}
